<template>
  <div>
    <div class="line"></div>

    <el-container>
      <el-header style="padding:0px">
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#895c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item
            v-for="(item, i) in menu"
            :key="i"
            :index="i"
            @click="tiaozhuan(item.url)"
            >{{ item.name }}</el-menu-item
          >
          &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
          &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
          &emsp;&emsp;&emsp;&emsp;
          <el-button type="info" round @click="logout">退出登录</el-button>
          用户:<a href="/geren"
            ><el-avatar :src="avatar_url"></el-avatar
          ></a>

          <!-- 下拉菜单 -->
            <!-- <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu> -->
        </el-menu>

        <router-view></router-view>
      </el-header>
    </el-container>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  name: "",
  data() {
    return {
      avatar_url: "",
      userinfo: [],
      list: [],
      menu: [],
      activeIndex2: "0",
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    if (localStorage.getItem("token") == null) {
      this.$router.push("/");
    }
    // 获取菜单信息
    Axios.get("http://127.0.0.1:8000/api/menu/menus/", {
      headers: { token: localStorage.getItem("token") || "" },
    }).then((res) => {
      console.log("获取菜单信息>>>", res);
      this.menu = res.data.menu_data;
    });
    // 获取登录用户信息
    Axios.get("http://127.0.0.1:8000/api/users/info_list/", {
      headers: { token: localStorage.getItem("token") || "" },
    }).then((res) => {
      console.log("获取用户信息>>>", res);
      this.userinfo = res.data.data.userinfo;
      this.avatar_url = res.data.data.avatar_url;
    });
  },

  methods: {
    handleSelect(key, keyPath) {
      console.log("1234", key, keyPath);
    },
    logout() {
      var storage = window.localStorage;
      storage.clear();
      this.$router.push("/"); //跳回登录地址
    },
    tiaozhuan(url) {
      this.$router.push(url);
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style>
</style>
